<template>
  <Modal
    ref="modal"
    title="开通账号"
    width="500px"
    height="600px"
    :before-show="handleBeforeShow"
    @close="handleClose"
  >
    <template #reference>
      <slot />
    </template>
    <el-form
      ref="form"
      label-width="120px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="企业名称">
        <el-input
          v-model.trim="form.companyName"
          class="max-w-full"
          disabled
        />
      </el-form-item>
      <el-form-item label="开通数量">
        <el-input
          v-model.trim="form.accNum"
          class="max-w-full"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="企点企业简称"
        prop="qdCompanyName"
      >
        <el-input
          v-model.trim="form.qdCompanyName"
          class="max-w-full"
        />
      </el-form-item>

      <el-form-item
        label="管理主QQ"
        prop="masterQq"
      >
        <el-input
          v-model.trim="form.masterQq"
          maxlength="13"
        />
      </el-form-item>
      <div
        v-for="(item, index) in form.createEmpParamList"
        :key="index"
        class="flex"
      >
        <el-form-item
          label="QQ账号"
          :prop="`createEmpParamList[${index}].minorCode`"
          :rules="{
            required: true,
            message: '必填',
          }"
        >
          <el-input v-model.trim="item.minorCode" />
        </el-form-item>
        <el-form-item
          label="QQ密码"
          :prop="`createEmpParamList[${index}].prPwd`"
          :rules="{
            required: true,
            message: '必填',
          }"
        >
          <el-input
            v-model.trim="item.prPwd"
            type="password"
          />
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <div class="text-center">
        <el-button @click="() => $refs.modal.hide()">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >
          确定
        </el-button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { merge, pick } from 'lodash-es'
import { createAdmin } from '@/api/company'
import { isSuccess } from '@/utils/common'
import { orderDetail } from '@/api/order'

export default {
    components: {
        Modal: () => import('@/components/Modal'),
    },
    props: {
        value: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            form: {
                qdCompanyName: '',
                companyName: '',
                masterQq: '',
                createEmpParamList: [],
            },
            rules: {
                masterQq: [{ required: true, message: '必填' }],
                qdCompanyName: [{ required: true, message: '必填' }],
                minorCode: [{ required: true, message: '必填' }],
                prPwd: [{ required: true, message: '必填' }],
            },
        }
    },
    computed: {
        canAddAccount({ value }) {
            return value.orderType !== 2
        },
    },
    watch: {},
    methods: {
        async handleBeforeShow() {
            // 开通QQ账号根据传入的accNum决定，传入几个，渲染几个
            const defaultQQArray = new Array(this.value.accNum)
                .fill(null)
                .map(() => ({
                    minorCode: '',
                    prPwd: '',
                }))
            this.$set(this.form, 'createEmpParamList', defaultQQArray)
            await this.getDetail()
        },
        async getDetail() {
            if (!this.value?.id) {
                this.$message('订单号不正确!')
                throw new Error('订单号不正确')
            }

            const res = await orderDetail({ orderId: this.value.id })
            if (isSuccess(res) && res.data) {
                this.form = merge({}, this.form, res.data)
            }
            const obj = pick(this.value, ['accNum', 'companyName'])
            this.form = { ...this.form, ...obj }
        },
        async handleSave() {
            const valid = await this.$refs.form.validate()
            if (valid) {
                const data = pick(this.form, [
                    'createEmpParamList',
                    'masterQq',
                    'qdCompanyName',
                ])
                data.id = this.value.id

                const res = await createAdmin(data)
                if (isSuccess(res)) {
                    this.$message.success('开通成功')
                    this.$refs.modal.hide()
                    this.$store.dispatch('order/list')
                }
            }
        },
        handleClose() {
            this.reset()
        },
        reset() {
            this.$refs.form?.resetFields()
            this.form.createEmpParamList = [
                {
                    minorCode: '',
                    prPwd: '',
                },
            ]
        },
    },
}
</script>